@import "media-queries";

.aboutUs {
  .mpy-aboutUs {
    picture {
      position: relative;
      text-align: center;
      img {
        width: 100%;
      }
      h1 {
        font-size: 1.5rem;
        color: #fff;
        margin: 0;
        top: 0;
        width: 100%;
        position: absolute;
        font-weight: normal;
      }
    }
    p {
      margin: 1rem 2rem;
      font-size: 1.2rem;
    }
  }
  .mpy-culture {
    .mpy-culture-hd {
      position: relative;
      img {
        width: 100%;
      }
      .mpy-culture--hd-content {
        width: 100%;
        height: 100%;
        font-size: 1.5rem;
        color: #fff;
        top: 0;
        margin: 2.4rem auto;
        position: absolute;
        text-align: center;
        h1 {
          color: #fff;
          font-size: 1.5rem;
          margin: 0;
        }
        p {
          color: #fff;
          font-size: 1.2rem;
          margin: 0;
        }
      }
    }
    .mpy-culture-bd {
      margin: 1rem;
      font-size: 0;
      .mpy-culture-item {
        width: 50%;
        display: inline-block;
        text-align: center;
        img {
          width: 3.2rem;
        }
        h1 {
          margin: 0;
          font-size: 1.5rem;
          width: auto;
        }
        p {
          font-size: 0.9rem;
          margin: 0;
          padding: 0.5rem 0.5rem 0 0.5rem;
        }
      }
      .mpy-culture-item:first-child {
        border-right: 0.1rem solid $mainColor;
      }
      .mpy-culture-item:last-child {
        border-left: 0.1rem solid $mainColor;
      }
    }
    .mpy-culture-ft {
      position: relative;
      img {
        width: 100%;
        height: 14.8rem;
      }
      .mpy-culture-ft-content {
        width: 100%;
        height: 14.8rem;
        color: #fff;
        top:0;
        position: absolute;
        text-align: center;
        .content-left {
          height: 14.8rem;
          float: left;
          width: 35%;
          position: relative;
          h1 {
            position: absolute;
            top:50%;
            right: 0;
            margin-top: -2.5rem;
            height: 5rem;
            color: #fff;
            font-size: 1.2rem;
            margin-bottom: 0;
          }
        }
        .content-right {
          height: 14.8rem;
          float: right;
          width: 65%;
          position: relative;
          p {
            position: absolute;
            top: 50%;
            margin-top: -3.5rem;
            height: 7rem;
            font-size: 1.2rem;
            color: #fff;
            text-align: left;
            margin-bottom: 0;
            margin-left: 2rem;
          }
        }
      }

    }
  }
  .mpy-passageway {
    * {
      font-size: 1.2rem;
      color: $AuxiliaryFontBlackColor;
      text-align: center;
    }
    img {
      width: 100%;
    }
    .mpy-passageway-develop {
      h1 {
        margin: 1rem auto;
      }
    }
    .mpy-passageway-profit {
      h1 {
        margin: 1rem auto;
      }
      .mpy-passageway-profit-bd {
        margin: auto 2rem;
        .mpy-avg-sm-4 {
          li {
            display: inline-block;
            h4 {
              color: $mainFontColor;
              margin: 0.5rem auto;
              font-size: 0.9rem;
            }
            img {
              width: 3rem;
            }
          }
        }
      }
    }
  }
}